<template>
    <div>
        <Form ref="formValidate" :label-width="80">
            <FormItem label="总计：">
                <p>{{data.calculate}}元</p>
            </FormItem>
            <FormItem label="会员优惠：">
                <p>{{authMoney}}元</p>
            </FormItem>
            <FormItem label="优惠金额：">
                <p v-if="isAuth">
                    <Input v-model="authMoney" placeholder="请输入优惠金额" class="input"></Input>
                </p>
                <p v-else>
                    <Button type="primary" @click="clickAuth">优惠价格</Button>
                </p>
            </FormItem>
            <FormItem label="应收金额：">
                <p class="td-price">￥{{data.money}}</p>
            </FormItem>
        </Form>
        <!-- 优惠授权弹窗 -->
		<div v-if="authData.isShow">
			<XAuthLoginModal 
                :data="authData"
                @on-submit="submitAuth"></XAuthLoginModal>
		</div>
    </div>
</template>

<script>
import $ from 'jquery'
import XAuthLoginModal from '@/pages/movie/view/XAuthLoginModal'
import accountService from '@/network/service/accountService.js'
    export default {
        props: ['data'],
        components: {
            XAuthLoginModal
        },
        computed: {
            totalCost() {
                let data = this.data;
                let sum = 0;
                let totalCost = 0;
                if (data != undefined) {
                    for (var i = 0; i < data.length; i++) {
                        sum = data[i].price * data[i].number;
                        totalCost += sum
                    }
                    return totalCost
                }
            }
        },
        data() {
            return {
                authMoney: 0,
                isAuth: false,
                authData: {
                    isLoading: false,
                    isShow: false,
                    data: {}
                },
            }
        },
        mounted() {},
        methods: {
            clickAuth() {
                this.authData.isShow = true;
            },
            submitAuth(formData) {
                this.authLogin(formData)
            },

            authLogin(formData) {
                let params = {
                    phone: formData.data.phone,
                    password: formData.data.password
                }
                formData.isLoading = true;
                accountService.authLogin(params).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        console.log(result.data);
                        this.isAuth = true;
                        formData.isLoading = false;
                        formData.isShow = false;
                    } else {
                        formData.isLoading = false;
                        this.$Message.error(resmsg);
                    }
                }, error => {
                    formData.isLoading = false;
                    this.$Message.error('服务器异常，请稍后再试')
                })
            }
        }
    }
</script>

<style scoped>
td {
    font-size: .14rem;
    padding-top: .2rem;
    color: rgb(67, 62, 65);
}
.td {
    text-align: right;
    width: 1rem;
}
.td-price {
    font-size: .24rem;
    color: #CD2A86;
}
.input {
    border: 1px solid #D5CED2;
    border-radius: 5px;
}
p {
    word-wrap:break-word;
}
</style>